<template>
    <view class="cus-select">
        <slot :data="{showLabel}">
          <u-cell-item :value="showLabel || placeholder" :arrow="true" @click="show = true"></u-cell-item>
        </slot>
        <u-select v-model="show" :list="showOptions" @confirm="confirm" :default-value="defaultValue" safe-area-inset-bottom></u-select>
    </view>
</template>

<script lang="ts" setup>
import { ref,defineProps, defineEmits, computed } from 'vue'
interface DefaultProps {
    label: string,
    value: string
}
const props = defineProps({
    value: {
        type: [String, Number],
        default: ''
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    defaultProps: {
        type: Object,
        default: () => ({
            label: 'label',
            value: 'value'
        })
    },
    options: {
        type: Array,
        default: () => []
    }
})
const emit = defineEmits(['update:data', 'change'])
const show = ref(false)
const showLabel = computed(() => {
    const obj = props.options.find((item:any) => item[props.defaultProps.value] == props.value) || {}
    return obj[props.defaultProps.label]
})
const showOptions = computed(() => {
    return props.options.map((item:any) => ({
        ...item,
        label: item[props.defaultProps.label],
        value: item[props.defaultProps.value]
    }))
})
const defaultValue = computed(() => {
    let index = showOptions.value.findIndex(item => item.value == props.value)
    return index > -1 ? [index] : [0]
})

const confirm = (data:any) => {
    console.log(data)
    const value = data[0].value
    emit('update:value', value+'')
    emit('change', value+'')
}
</script>
<script lang="ts">
export default {
  options: {
    styleIsolation: 'shared'
  }
}
</script>
<style lang="scss">
.cus-select{
  width: 100%;
  .u-border-bottom:after{
    border:none
  }
  .u-cell__value{
    text-align: left;
    padding-left: 12rpx;
  }
  .u-cell{
    padding: 0;
  }
}
</style>